<template>
  <div>
    <div>
      <div class="user">
        <div @click="handleOne" :class="{ active: isShow }">
          个人资料
          <!-- <div v-show="isShow" class="triangle"></div> -->
        </div>

        <div @click="handleTow" :class="{ active: !isShow }">
          修改密码
          <!-- <div v-show="!isShow" class="triangle"></div> -->
        </div>
      </div>
      <div class="msg " v-show="isShow">
        <div class="msg_left ">
          <div class="msg_left_msg ">
            <span>用户名： </span> <span>{{ User.username }}</span>
          </div>
          <div class="msg_left_msg">
            <span>会员等级： </span><span>{{ User.vip }}</span>
          </div>
          <div class="msg_left_msg">
            <span>单文件大小： </span><span class="font_color">{{ User.singlesize }}</span>
          </div>
          <div class="msg_left_msg">
            <span>总容量： </span><span class="font_color">{{ User.allowsize }}</span>
          </div>
          <div class="msg_left_msg">
            <span>已用容量： </span><span>{{ User.uploadedsize }}</span>
          </div>
        </div>
        <div class="msg_right ">
          <div class="msg_right_msg">
            <span class="">邮箱号码： </span>
            <span class="">{{ User.email }}</span>
            <el-button type="primary" class="btn  btn-primary btn-lg " data-toggle="modal" data-target="#myEmai"
              style="margin-left: -3px;">修改
            </el-button>
          </div>
          <div class="msg_right_msg">
            <span>手机号码： </span><span class="font_color">{{ User.phone }}</span>
            <el-button type="primary" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myphone">修改
            </el-button>
          </div>
          <div class="msg_right_msg">
            <span>实名状态： </span><span>{{ User.rzstatusText }}</span>
            <el-button type="primary" class="btn" @click="goUrl('/realName', 'realName')"
              v-if="User.rzstatus == 0 || User.rzstatus == 3" :disabled="userStatus">去认证
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改email弹出框star -->
    <div class="modal modalEmail fade" id="myEmai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header" style="text-align: center;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">邮箱号码修改</h4>
          </div>
          <div class="phoneBox">
            <input class="emailIpt" type="text" @blur="checkEmail(ruleForm.email)" v-model='ruleForm.email'>
          </div>
          <div class="phoneFooter">
            <button type="button" style="background-color: #E6E6E6;" class="btn btn-default" data-dismiss="modal"
              @click=" removeUserEmail()">取消</button>
            <button type="button" class="btn btn-primary" @click=" setUserEmail(ruleForm.email)">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改email弹出框end -->
    <!-- 修改手机号弹出框star -->
    <div class="modal modalPhone fade" id="myphone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title title" id="myModalLabel">手机号码修改</h4>
          </div>
          <div class="modal-body" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <div class="container-fluid small_box">
              <div class="row">
                <label class="label_style col-xs-5 col-sm-4 col-md-4 col-lg-4" style="text-align: right">当前手机号:</label>
                <div class="col-xs-7 col-sm-8 col-md-8 col-lg-8">
                  <span style="color: #ff7226">{{ User.phone }}</span>
                </div>
              </div>
            </div>

            <div class="container-fluid small_box">
              <div class="row">
                <label class="label_style col-xs-5 col-sm-4 col-md-4 col-lg-4" style="text-align: right">新手机号码:</label>
                <div class="col-xs-7 col-sm-8 col-md-8 col-lg-8">
                  <input type="password " class="form-control right_ipt" @blur="checkphone(ruleForm.phone)"
                    v-model="ruleForm.phone" placeholder="请输入您需要更换的手机号" style="margin-top: -5px;" />
                </div>
              </div>
            </div>
            <div class="container-fluid small_box">
              <div class="row">
                <label class="label_style col-xs-5 col-sm-4 col-md-4 col-lg-4" style="text-align: right">手机验证码:</label>
                <div class="col-xs-7 col-sm-8 col-md-8 col-lg-8">
                  <input type="password right_ipt" v-model="ruleForm.code" class="form-control right_ipt"
                    placeholder="请输入您的手机验证码" style="margin-top: -5px;" />
                  <el-button type="primary" class="small_box_btn" @click="getphoneCode" :disabled="buttonDisabled">
                    {{timer}}</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer footrt_btn">
            <button type="button" class="btn btn-default" data-dismiss="modal"
              style=" width: 110px; height: 36px; background-color: #E6E6E6;" @click="removeUserphone"> 取消
            </button>
            <button type="button" class="btn btn-primary" @click="setUserphone"
              style=" width: 110px; height: 36px; background-color: #ff7226;border: 0px;">
              保存修改
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改手机号弹出框end -->
    <!-- 修改密码区域star-->
    <div class="pwd" v-if="!isShow">
      <el-form :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
        label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码:" prop="agoPass" class="pwd-title">
          <el-input class="input1" :type=" eyeflag.passwordone" v-model="ruleForm.agoPass" auto-complete="off">
          </el-input>
          <div class="eye" :class="{'eye1':eyeflag.eye1}" @click.stop="handleOpenone"><img :src="eyeflag.srcone" alt="">
          </div>
        </el-form-item>
        <el-form-item label="密码:" prop="pass" class="pwd-title">
          <el-input class="input2" :type=" eyeflag.passwordtow" v-model="ruleForm.pass" auto-complete="off">
          </el-input>
          <div class="eye" :class="{'eye1':eyeflag.eye2}" @click.stop="handleOpentow"><img :src="eyeflag.srctow" alt="">
          </div>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass" class="pwd-title">
          <el-input class="input3" :type=" eyeflag.passwordthree" v-model="ruleForm.checkPass" auto-complete="off">
          </el-input>
          <div class="eye" :class="{'eye1':eyeflag.eye3}" @click.stop="handleOpenthree"><img :src="eyeflag.srcthree"
              alt=""></div>
        </el-form-item>
        <el-form-item class="pwd-but">
          <el-button style="width:160px" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改密码区域end -->
  </div>
</template>

<script>
  // 邮箱的正则
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  // 手机号的正则
  const regMobile =
    /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;

  import filters from "../../utils/filters";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      // 原密码
      let validateAgoPass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入原密码"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      // 新密码
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      // 再次输入密码
      let validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        // 获取验证码的按钮是否禁用
        buttonDisabled: false,
        // 表单中的数据
        ruleForm: {
          agoPass: "", //原来的密码
          phone: '', //修改手机号
          pass: "", //新密码
          checkPass: "", //再次输入密码
          email: "", //邮箱
          code: '', //验证码
        },
        // 密码验证规则
        rules: {
          agoPass: [{
            validator: validateAgoPass,
            trigger: "blur"
          }],
          pass: [{
            validator: validatePass,
            trigger: "blur"
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: "blur"
          }],

        },
        timer: "获取验证码",
        times: null, //获取验证码的定时器
        // 获取的用户信息
        User: {
          username: "",
          email: "",
          phone: "",
          vip: "",
          vip_endtime: "",
          singlesize: "",
          rzstatus: "",
          rzstatusText: "",
          uploadedsize: "",
        },
        // 修改密码的密码可见
        eyeflag: {
          eye1: false,
          eye2: false,
          eye3: false,
          passwordone: 'password',
          passwordtow: 'password',
          passwordthree: 'password',
          srcone: '../../../static/realName/eyeCloce.png',
          srctow: '../../../static/realName/eyeCloce.png',
          srcthree: '../../../static/realName/eyeCloce.png',
        },
        isShow: true, //控制个人资料与密码的切换
        labelPosition: "left", //密码页面的文字对齐方式
        userStatus: false,
        pop_up: {
          myEmaiClose: ''
        }
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
      },
      // 点击个人资料
      handleOne() {
        this.isShow = true;
      },
      // 点击密码
      handleTow() {
        this.isShow = false;
      },
      // 路由页面跳转
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
      },
      // 密码可见
      handleOpenone(e) {
        this.eyeflag.eye1 = !this.eyeflag.eye1;
        if (this.eyeflag.eye1) {
          this.eyeflag.passwordone = 'text'
          this.eyeflag.srcone = '../../../static/realName/eyeOpen.png'
        } else {
          this.eyeflag.passwordone = 'password'
          this.eyeflag.srcone = '../../../static/realName/eyeCloce.png'
        }
      },
      handleOpentow(e) {
        this.eyeflag.eye2 = !this.eyeflag.eye2;
        if (this.eyeflag.eye2) {
          this.eyeflag.passwordtow = 'text'
          this.eyeflag.srctow = '../../../static/realName/eyeOpen.png'

        } else {
          this.eyeflag.passwordtow = 'password'
          this.eyeflag.srctow = '../../../static/realName/eyeCloce.png'

        }
      },
      handleOpenthree(e) {
        this.eyeflag.eye3 = !this.eyeflag.eye3;
        if (this.eyeflag.eye3) {
          this.eyeflag.passwordthree = 'text'
          this.eyeflag.srcthree = '../../../static/realName/eyeOpen.png'

        } else {
          this.eyeflag.passwordthree = 'password'
          this.eyeflag.srcthree = '../../../static/realName/eyeCloce.png'

        }
      },
      //页面加载获取数据
      query() {
        this.$post(this.API.UserMsg).then((res) => {
          // console.log(res.data);
          this.User.username = res.data.username;
          this.User.allowsize = res.data.allowsize;
          this.User.phone = res.data.phone;
          this.User.rzstatus = res.data.rzstatus;
          this.User.rzstatusText = res.data.rzstatusText;
          this.User.singlesize = res.data.singlesize;
          this.User.uploadedsize = res.data.uploadedsize;
          this.User.vip = res.data.vip;
          // console.log(res);
          if (res.data.email) {
            this.User.email = res.data.email;
          } else {
            this.User.email = "未绑定邮箱";
          }
          if (res.data.rzstatus == "已实名") {
            this.userStatus = true
          }
        });
      },
      // 检验邮箱是否正确
      checkEmail(value) {
        if (regEmail.test(value)) {
          this.$message({
            message: "邮箱格式正确",
            type: "success",
          });
        } else {
          this.$message({
            message: "请输入正确的邮箱",
            type: "error",
          });
        }

      },
      // 修改邮箱请求
      setUserEmail(value) {
        if (regEmail.test(value)) {
          var params = new URLSearchParams();
          params.append("email", this.ruleForm.email);
          this.$post(this.API.ResetUserMsg, params).then((res) => {
            this.setEmailVisible = false;
            this.query();
            this.$message({
              message: "修改邮箱成功",
              type: "success",
            });
          });
        } else {
          this.$message({
            message: "请输入正确的邮箱",
            type: "error",
          });
        }
      },
      removeUserEmail() {
        this.ruleForm.email = ''
      },
      // 修改手机号请求
      setUserphone() {
        var params = new URLSearchParams();
        params.append("phone", this.ruleForm.phone);
        params.append("code", this.ruleForm.code);
        clearInterval(this.times)
        if (this.ruleForm.phone.length < 11) {
          this.$message({
            message: "请输入正确的手机号",
            type: "error",
          });
          return
        }
        if (this.ruleForm.code.length < 4) {
          this.$message({
            message: "请输入正确的验证码",
            type: "error",
          });
          return
        }
        this.$post(this.API.ResetUserMsg, params).then((res) => {
          this.query()
          this.$message({
            message: "修改手机号成功",
            type: "success",
          });
        });
      },
      removeUserphone() {
        this.ruleForm.phone = ''
        this.timer = '获取验证码'
        this.buttonDisabled = false
        clearInterval(this.times)
      },
      // 验证手机号
      checkphone(value) {
        // console.log(value);
        if (regMobile.test(value)) {
          return true
        } else {
          this.$message({
            message: "请输入正确的规格的手机号",
            type: "error",

          });
        }
      },
      // 获取手机号验证码
      getphoneCode() {
        if (this.ruleForm.phone.length < 11) {
          this.$message({
            message: "请输入正确的手机号",
            type: "error",
          });
          return
        }
        this.timer = 120;
        var params = new URLSearchParams();
        params.append("mobile", String(this.ruleForm.phone));
        params.append("event", 'changephone');
        this.$post(this.API.Sms_code, params).then((res) => {
          this.buttonDisabled = true;
          clearInterval(this.times)
          this.times = setInterval(() => {
            this.timer--
            if (this.timer <= 0) {
              this.timer = '获取验证码'
              this.buttonDisabled = false
              clearInterval(this.times)
            }
          }, 1000)

        });

      },
      // 提交修改后的密码
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = new URLSearchParams();
            params.append("oldpassword", this.ruleForm.agoPass);
            params.append("password", this.ruleForm.checkPass);
            this.$post(this.API.ResetUserMsg, params).then((res) => {
              // console.log(res);
              if (res.code == 1) {
                this.handleCommand('b')
              }
              this.$message({
                message: "修改密码成功",
                type: "success",
              });
            });
          } else {
            return;
          }
        });
      },
      handleCommand(command) {
        if (command == "a") {
          this.goUrl("account_account", "account_account");
        } else if (command == "b") {
          //清除token
          sessionStorage["token"] = "";
          sessionStorage["token_time"] = 0;
          //成功，跳转到首页
          this.$router.push({
            path: "/home",
            name: "home",
          });
          this.hasLogin = false;

          sessionStorage.setItem("currentTab_title", "home");
          location.reload();
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.query();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .user {
    display: flex;
    margin: 0px 0 40px 0px;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #272727;
  }

  .user div {
    position: relative;
    width: 100px;
    height: 100%;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    color: #fff;
    margin-left: 60px;
  }

  .active {
    color: #ff7226 !important;
    border-bottom: 2px solid #ff7226;
  }

  .msg {
    display: flex;
    margin-left: 40px;
  }

  .msg_left {
    width: 50%;
    overflow: hidden;
  }

  .msg_right {
    width: 50%;
    margin-top: -10px;

    overflow: hidden;
  }

  .msg_left_msg {
    margin-bottom: 36px;
    padding: 1px;
  }

  .msg_left_msg span:nth-child(1) {
    display: inline-block;
    width: 23%;
    font-size: 14px;
    color: #fff;
  }

  .msg_left_msg span:nth-child(2) {
    display: inline-block;
    text-align: left;
    font-size: 14px;
    color: #ff7226;
  }

  .font_color {
    color: #aeaeae !important;
  }

  .msg_right_msg {
    height: 36px;
    line-height: 36px;
    margin-bottom: 30px;
  }

  .msg_right_msg span:nth-child(1) {
    display: inline-block;
    width: 23%;
    font-weight: 400;
    color: #fff;
  }

  .msg_right_msg span:nth-child(2) {
    display: inline-block;
    width: 31%;
    color: #ff7226;
  }

  .msg_right_msg .btn {
    display: inline-block;
    width: 80px !important;
    height: 30px !important;
    line-height: 0 !important;
    margin-top: -6px;
    background-color: #ff7226;
    border: 0px;
  }

  .pwd {
    margin: 40px 0 0 40px;
  }

  .pwd-title>>>.el-form-item__label {
    color: #fff;
  }

  .pwd-title>>>.el-input__inner {
    color: #fff;
    background-color: #0f0f0f;
  }

  .pwd-but .el-button {
    border: 0px;
    background-color: #ff7226;
  }

  .title {
    text-align: center;
  }

  .label_style {
    font-size: 14px;
  }

  .right_ipt {
    height: 36px;
  }

  .small_box {
    width: 80%;
    margin: 20px auto 0;
    position: relative;
  }

  .small_box_btn {
    position: absolute;
    height: 36px;
    width: 110px;
    top: -5px;
    right: 15px;
    background-color: #ff7226;
    border-radius: 4px;
    line-height: 0;
    border: 0px;
  }

  button:focus {
    outline: 0 none !important;
  }

  .footrt_btn {
    display: flex;
    justify-content: space-around;
  }

  .phoneBox {
    width: 100%;
    height: 118px;
    line-height: 118px;
    text-align: center;
  }

  .emailIpt {
    width: 360px;
    height: 36px;
    border: 1px solid #E4E7ED;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
  }

  .emailIpt:focus {
    outline: none;
  }

  .phoneFooter {
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .phoneFooter button {
    width: 110px;
    height: 36px;
  }

  .phoneFooter button:nth-child(1) {
    background-color: #9A9A9A;
  }

  .phoneFooter button:nth-child(2) {
    margin-left: 5%;
    background-color: #ff7226;
  }

  .eye {
    display: inline-block;
    margin-left: -5px;
    width: 40px;
    height: 40px;
    background-color: #0f0f0f;
  }

  .input1,
  .input2,
  .input3 {
    width: 70%;
  }

  .eye img {
    width: 100%;
    height: 100%;
  }

  .eye1 {
    background-color: #0f0f0f;
  }

  .modal-body {
    margin-bottom: 20px;
  }

  .modal-dialog {
    margin-top: 250px;
  }

  @media screen and (max-width: 992px) {
    .user {
      margin: 10px auto;

    }

    .msg {
      display: block;
      margin-left: 40px;
    }

    .msg_left {
      width: 100%;
    }

    .msg_right {
      width: 100%;
    }

    .modalEmail {
      width: 90%;
      margin: 0 auto;
    }

    .phoneBox input {
      width: 90%;
    }

    .modalPhone {
      width: 90%;
      padding: -15px;
      margin: 0 auto;
      margin-top: -100px;
    }

    .small_box {
      width: 100%;
      margin-top: 10px;
      position: relative;
    }

    div>>>.modal-dialog {
      padding: 0 !important;
    }

    .msg_right_msg span:nth-child(1) {
      width: 32%;
    }

  }


  @media screen and (min-width: 350px) and (max-width: 430px) {
    .pwd[data-v-1d1ff15e] {
      margin: 40px 0 0 20px !important;
    }

  }

</style>
